/*
 * @Description: 自定义指令函数封装
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-09-30 14:15:12
 * @LastEditTime: 2021-09-30 14:37:50
 * @LastEditors: 0001100986/LiuShuai
 */

// 操作按钮鉴权
const power = {
  inserted: (el, binding, vnode) => {
    let role = JSON.parse(localStorage.getItem('sys')).user.info.roleUserlabel;
    let code = binding.value;
    // 场景一：维护员只有查询权限，直接屏蔽元素
    // 场景二：管理员拥有部分操作权限，部分一级资源的查询权限
    // 场景三：超管拥有所有权限，不进行处理
    // 系统维护员
    if (role === '系统维护员') {
      el.parentNode.removeChild(el);
    }
    // 系统管理员
    if (role === '系统管理员') {
      if (code === 0) {
        vnode.elm.disabled = true;
        vnode.elm.style.color = '#c0c4cc';
        vnode.elm.style.cursor = 'not-allowed';
      }
      if (code === 1) {
        el.parentNode.removeChild(el);
      }
    }
  }
};

// el-option 选择框宽度自适应
const adaption = {
  bind: (el, binding) => {
    // 拿到input框的父节点，是为了获取完整的dom宽度
    const inputParent = el.querySelector('.el-input');
    // 拿到input框的节点，是为了给input框绑定聚焦事件
    const input = el.querySelector('.el-input__inner');
    // 获取element-ui定义好的下拉盒子
    const downBox = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    // 给input绑定聚焦事件，focus时触发
    input.addEventListener('focus', function() {
      // getBoundingClientRect 可以拿到dom实际宽度（包括小数点）
      let inputWidth = inputParent.getBoundingClientRect().width.toFixed(2);
      downBox.style.width = inputWidth + 'px';
    });
  }
};

export default { power, adaption };